<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>亿信聊天室 个人中心</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/menber.css">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<header>
    <div class="top">
        <div class="container">
            <!--未登录状态-->
            <div class="login" style="display: none">
                <div class="top-reg">
                    <div class="denglu fl">
                        <a href="javascript:;"><span><img src="../images/icon_wdzh.png" alt="">登陆</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="zhuce fl">
                        <a href="javascript:;"><span><img src="../images/icon_yhgl.png" alt="">注册</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span>游客，您好！</span>
                    您是第666位访问网站的人
                </div>
            </div>
            <!-- 登陆状态 -->
            <div class="login success">
                <div class="top-reg">
                    <div class="qiandao fl">
                        <a href="javascript:;"><span><img src="../images/icon_rl.png" alt="">签到</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="message.html"><span><img src="../images/icon_tz.png" alt="">通知</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="menber.html"><span><img src="../images/icon_grzx.png" alt="">个人中心</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="javascript:;" class='loginout'><span><img src="../images/icon_aqtc.png" alt="">安全退出</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span>xxx，您好！</span>
                    当前在线人数666人
                </div>
            </div>
        </div>
    </div>
</header>
<!--logo-->
<div class="logo">
    <div class="container">
        <div class="logoimg fl">
            <a href="../index.html"><img src="../images/icon_logo.png" alt=""></a>
        </div>
        <div class="logoright fr">
            <li class="on"><a href="../index.html">首页</a></li>
            <li><a href="javascript:;" class="addroom">创建房间</a></li>
            <li><a href="javascript:;"><img src="../images/icon_nav.png" alt=""></a></li>
            <div class="search-box fl">
                <input type="text" class="search" placeholder="请输入房间ID">
                <img src="../images/icon_search.png" alt="">
                <div class="result_box">

                </div>
            </div>
        </div>
    </div>
</div>
<!--个人中心-->
<div class="container menber">
    <div class="menber-left fl">
        <div class="menber-left-top">
            <div class="user-logo">
                <img src="../images/icon_mrtx.png" alt="" class="user-left-head">
                <p class="cen_username">用户名</p>
                <p class="user_id">ID:445566</p>
            </div>
            <div class="menber-left-cen">
                <li>
                    <p class="user_hot">1000</p>
                    <p>活跃度</p>
                </li>
                <li>
                    <p class="user_money">100</p>
                    <p>亿信币</p>
                </li>
                <div class="clearfix"></div>
            </div>
            <div class="menber-left-link">
                <li><a href="menber.html"><img src="../images/icon_wdzl.png" alt="">我的资料</a></li>
                <li class="on"><a href="wdgz.html"><img src="../images/icon_wdgz.png" alt="">我的关注</a></li>
                <li><a href="fans.html"><img src="../images/icon_wdfs.png" alt="">我的粉丝</a></li>
                <li><a href="wdzh.html"><img src="../images/icon_wdzh.png" alt="">我的账户</a></li>
                <li><a href="message.html"><img src="../images/icon_wdmsg.png" alt="">我的消息</a></li>
            </div>
        </div>
    </div>
    <div class="menber-right fl">
        <!-- 我的资料 -->
        <div class="user-info fans">
            <input type="text" placeholder="请输入用户昵称" class="fans_search">
        </div>
        <div class="gz-list">
            <ul></ul>
        </div>
        <div class="message-page">
            <div class="pagebox" style="margin-right: 95px;">
                <span class="blue"><a href="javascript:;" class="prev">上一页</a></span>
                <span class="blue">2/3页</span>
                <span class="blue"><a href="javascript:;" class="next">下一页</a></span>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<!--个人中心end-->
<!--footer-->
<footer>
    <div class="container">
        <div class="footer-list">
            <div class="footer-tit">
                联系我们
            </div>
            <ul>
                <li><a href="tencent://message/?uin=88888888&Site=&menu=yes">商务QQ:11111111</a></li>
                <li>技术咨询:11111111</li>
                <li>联系电话:11111111</li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                常见问题
            </div>
            <ul>
                <li><a href="javascript:;">账号问题</a></li>
                <li><a href="javascript:;">常见问题</a></li>
                <li><a href="javascript:;">新手入门</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                关于我们
            </div>
            <ul>
                <li><a href="javascript:;">公司介绍</a></li>
                <li><a href="javascript:;">隐私政策</a></li>
                <li><a href="javascript:;">免责声明</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                友情链接
            </div>
            <ul>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <img src="../images/icon_logo1.png" alt="">
        </div>
        <div class="clearfix"></div>
    </div>
</footer>
<div class="copyright">
    <div class="container">
        <div class="fr">川ICP备案号xxxxx号</div>
        <div class="cpr">Copyright ©聊天室网 2014-2018.All rights reseved</div>
    </div>
</div>

<!--我的关注-->
<script>
    $(window).ready(function(){
        $('.gz-list').on('click','.gz-both',function() {
            // 取消关注
            $.ajax({
                url:'http://shishi2017.com/api/personal/attention_cancel',
                data:{uid:$.cookie('user_id'),token:$.cookie('user_token'),fans_uid:$(this).data('uid') },
                type:'POST',
                dataType:'json',
                success:(function(gzmsg){
                    if(gzmsg.ret==200){
                        alert(gzmsg.msg);
                        get_list();
                    }
                }),
                error:(function(er){
                    alert(er.msg);
                })
            });
        });
        //初始加载数据
        //    根据ID搜索
        $('.fans_search').keyup(function(){
            if($('.fans_search').val().length!=0){
                setTimeout(function (){
                    $.ajax({
                        url:'http://shishi2017.com/api/personal/get_user_nickname',
                        data:{uid:$.cookie('user_id') ,token:$.cookie('user_token'),nickname:$('.fans_search').val()},
                        type:'POST',
                        dataType:'json',
                        success:(function(search){
                            if(search.ret!='200'){
                                $('.gz-list ul').html('<p>没有找到该用户哦~</p>');
                            }
                            else{
                                var gzinfo_txt,gzinfo_img;
                                search.data.back_data[0].is_attention==0?gzinfo_txt='已关注':gzinfo_txt = '点击关注';
                                search.data.back_data[0].is_attention==0?gzinfo_img='':gzinfo_img = '../images/icon_wdgz.png';
                                $('.gz-list ul').empty();
                                var search_re =
                                    '<div class="gz-box">'+
                                    '<div class="fr gz-btn">'+
                                    '<a href="javascript:;" title="'+gzinfo_txt+'" class="gz-both gz-no-both" id="gz_button" data-gz-id="'+ search.data.back_data[0].id +'"><img src="'+gzinfo_img+'" alt=""><span>'+gzinfo_txt+'</span></a>'+
                                    '</div>'+
                                    '<div class="gz-info">'+
                                    '<div class="gz-info-img">'+
                                    '<img src="'+ search.data.back_data[0].head +'" alt="">'+
                                    '</div>'+
                                    '<div class="gz-info-txt">'+
                                    '<div class="gz-name">'+ search.data.back_data[0].nickname +'</div>'+
                                    '<div class="gz-hyd">活跃度:1200</div>'+
                                    '</div>'+
                                    '</div>'+
                                    '</div>';
                                $('.gz-list ul').append(search_re);
                            }
                        }),
                    });
                },200)
            }else{
                get_list();
            }
        });
        function get_list(page){
            $.ajax({
                url:'http://shishi2017.com/api/personal/get_my_attention',
                data:{uid:$.cookie('user_id'),token:$.cookie('user_token'),page:page},
                type:'POST',
                dataType:'json',
                success:(function(list){
                    $('.gz-list ul').empty();
                    console.log(list);
                    if (list.ret=='201'){
                        $('.gz-list').append('<p>'+ list.msg+'~'+'</p>');
                    }else if(list.ret=='205'){
                        $('.gz-list').append('<p>你还没有关注任何人哦~</p>');
                        $('.message-page').empty();
                    }else{
                        var new_list='';
                        var s = list.data.back_data;

                        for(num in s){
                            s[num].nickname==''?s[num].nickname = '神秘人':s[num].nickname;
                            var gz_info_txt,gz_info_img;
                            s[num].hz_notice==0 ? (gz_info_txt='已关注',gz_info_img='../images/icon_wdgz.png') : (gz_info_txt='互相关注',gz_info_img='../images/icon_hxgz.png') ;
                            new_list+=
                                '<div class="gz-box">'+
                                '<div class="fr gz-btn">'+
                                '<a href="javascript:;" title="点击取消关注" class="gz-both" id="na" data-gz="'+ s[num].hz_notice +'" data-uid="'+ s[num].id +'"><img src="'+gz_info_img+'" alt="" height="12"><span>'+gz_info_txt+'</span></a>'+
                                '</div>'+
                                '<div class="gz-info">'+
                                '<div class="gz-info-img">'+
                                '<img src="'+ s[num].head +'" alt="">'+
                                '</div>'+
                                '<div class="gz-info-txt">'+
                                '<div class="gz-name">'+s[num].nickname+'</div>'+
                                '<div class="gz-hyd">活跃度:1200</div>'+
                                '</div>'+
                                '</div>'+
                                '</div>';
                        }
                        $('.gz-list ul').append(new_list);
                        //检测是否互相关注
                    }
                    var prev,next,nowpage,allpage;
                    nowpage = Number(money.data.now_page);
                    allpage = money.data.total_page;
                    prev = nowpage-1;
                    next = nowpage+1;
                    prev<1?prev=1:prev = nowpage-1;
                    next >= allpage ? next = allpage : next = nowpage+1;
                    var page =  '<span class="blue"><a href="javascript:;" class="prev pages" data-page="'+prev+'">上一页</a></span>\n' +
                                '<span class="blue">'+nowpage+'/'+allpage+'页</span>\n' +
                                '<span class="blue"><a href="javascript:;" class="next pages" data-page="'+next+'">下一页</a></span>\n';
                    $('.pagebox').empty();
                    $('.pagebox').append(page);
                }),
                error:(function(datae){
                    alert(JSON.parse(datae).msg);
                })
            });
        }
        get_list();
        $('.pagebox').on('click','.pages',function(){
            var num = $(this).data('page');
            get_list(num);
        });

        $(document).on('click','#gz_button',function(){
            console.log(123);
            var that = this;
            $.ajax({
                url:"http://shishi2017.com/api/personal/attention_someone",
                type:'POST',
                datatype:'json',
                data:{uid:$.cookie('user_id'),token:$.cookie('user_token'),fans_uid:$(this).data('gz-id')},
                success:(function(gz_data){
                    var gzdatas = JSON.parse(gz_data);
                        console.log(gzdatas);
                        if (gzdatas.ret==200){
                            console.log(123);
                            $(that).children('span').html('关注成功');
                        }else{
                            alert(gzdatas.msg)
                        }
                    })
            })
        })
    });

</script>

<!--我的关注end-->

<!--签到弹窗-->
<script src="../js/common.js"></script>
<script src="../js/menber.js"></script>
<script src="../js/distpicker.data.js"></script>
<script src="../js/distpicker.js"></script>
<script src="../js/main.js"></script>
</body>
</html>